
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyDiPkr30kkzrghoMVB_72P9uBEsjjg8Da0" type="text/javascript"></script>
    </head>
    <body onunload="GUnload()">
        <div id="path" style="overflow:auto;height:3px;visibility:hidden" ></div>
        <div id="map" style="width: 683px; height: 570px"></div>
        <script type="text/javascript">
            var g=new Array();//Tap cac doi tuong Direction
            var dis=[];//Tap cac quang duong
            var poly=new Array();//Tap cac Poly
            var code=0;//chi so cua g
            var class1=[];//Cac diem lop 1
            var class2=[];
            var class3=[];
            var class4=[];
            var indexClass1=0;//Chi so cua mang lop 1
            var indexClass2=0;
            var indexClass3=0;
            var indexClass4=0;
            var bi=[];
            if (GBrowserIsCompatible()) { 
                function createMarker(point,icon) {
                    icon.iconSize = new GSize(20, 20);
                    icon.shadowSize = new GSize(0, 0);
                    icon.iconAnchor = new GPoint(10,10);
                    var marker = new GMarker(point ,{draggable:false,icon:icon});
                    return marker;
                }
                // Hien thi ban do
                var map = new GMap2(document.getElementById("map"));
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl());
                map.setCenter(new GLatLng(21.02782957675263, 105.85769176483154),15);
                //tao ra mot tap cac direction
                for(var j=0;j<1000;j++){
                    g[j]=new GDirections(null, document.getElementById("path"));
                }
                //Them Listener cho cac polyline
                function addActionG(GDirections){
                    GEvent.addListener(GDirections,"load", function() {
                        dis[code]=GDirections.getDistance().meters;
                        poly[code] = GDirections.getPolyline();
                        poly[code].color="#FF0011"; 
                        poly[code].opacity = 10; 
                        poly[code].weight=6; 
                        var tg=code;
                        GEvent.addListener(poly[tg],"click", function() {
                            bi[tg]=tg;
                            poly[tg].setStrokeStyle({ color: "#0000FF"}); 
                        });
                        map.addOverlay(poly[code]);
                        code++;
                    });
                }
                for(var i=0;i<1000;i++){
                    addActionG(g[i]);
                }
                //Tao marker khi chon lop thiet bi
                document.clickMarker1= function clickMarker1(){
                GEvent.clearListeners(map, "click"); 
                    GEvent.addListener(map, "click", function(overlay,m1) {
                        var baseIcon = new GIcon(G_DEFAULT_ICON);
                        var iconClass1 = new GIcon(baseIcon,"1.png");
                        map.addOverlay(createMarker(m1,iconClass1));
                        class1[indexClass1]=m1;
                        indexClass1++;
                    });
                }
                
                document.clickMarker2= function clickMarker2(){
                    GEvent.clearListeners(map, "click"); 
                    GEvent.addListener(map, "click", function(overlay,m2) {
                        var baseIcon = new GIcon(G_DEFAULT_ICON);     
                        var iconClass2 = new GIcon(baseIcon,"2.png");   
                        map.addOverlay(createMarker(m2,iconClass2));
                        class2[indexClass2]=m2;                 
                        indexClass2++;
                    });
                }
                document.clickMarker3= function clickMarker3(){
                    GEvent.clearListeners(map, "click"); 
                    GEvent.addListener(map, "click", function(overlay,m3) {
                        var baseIcon = new GIcon(G_DEFAULT_ICON); 
                        var iconClass3 = new GIcon(baseIcon,"3.png");
                        map.addOverlay(createMarker(m3,iconClass3));
                        class3[indexClass3]=m3;
                        indexClass3++;
                    });
                }
            document.clickMarker4= function clickMarker4(){
                GEvent.clearListeners(map, "click"); 
                GEvent.addListener(map, "click", function(overlay,m4) {
                    var baseIcon = new GIcon(G_DEFAULT_ICON); 
                    var iconClass4 = new GIcon(baseIcon,"4.png");
                    map.addOverlay(createMarker(m4,iconClass4));
                    class4[indexClass4]=m4;
                    indexClass4++;
                });
            }
            //ham nay clear even khi click choose class
            document.clearListener= function clearListener(){
                GEvent.clearListeners(map, "click"); 
            }
            document.getClass1=function getClass1(){
                return class1; 
            }
            document.getClass2=function getClass2(){
                return class2;
            }
            document.getClass3=function getClass3(){
                return class3;
            }
            document.getClass4=function getClass4(){
                return class4;
            }
            var dem=0;
            document.getPath= function getPath(k){
                var j=k+1;
                var interval = setInterval(  function(){
                    var a= "from: "+class1[k] + " to: " + class1[j];
                    g[dem].load(a,{getPolyline:true,travelMode:G_TRAVEL_MODE_WALKING,getSteps:true});
                    dem++;
                    j++;
                    if(j==indexClass1){
                        clearInterval(interval);
                        k++;
                        if(k<indexClass1-1){
                            getPath(k);
                        }
                        else {
                            // getPath(0);
                        }
                    }
               
                },300);

            }
            document.getDis= function getDis(){
                return class3+"____"+class4;
            }
        }
        </script>
    </body>
</html>


